<template>
    <el-table :data="roleData" style="width: 100%;margin-top: 20px;" :height="675">
      <el-table-column type="selection" width="55" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="编号" prop="id" width="70" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="账号" prop="userName" />
      <!-- <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="密码" prop="password" /> -->
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="昵称" prop="nickName" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="邮箱" prop="email" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="电话" prop="phone" />
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="头像" prop="img">
        <template #default="props">
          <el-image :src="'http://localhost:8080/file/downLoad?fileName='+props.row.img" width="100" height="100"
            fit="contain" />
        </template>
      </el-table-column>
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
      label="角色">
        <template #default="props">
          {{ props.row.role==1?'管理员':'咨询师'}}
          </template>
    </el-table-column>
      <el-table-column label-class-name="lableclass" header-align="center" align="center" show-overflow-tooltip
        label="操作">
        <template #default="props">
          <el-button type="text" size="small" @click="Edit(props.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteid(props.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>

  <script setup>
  import { defineProps, reactive, watch } from 'vue';
import { ref } from 'vue';
const props=defineProps(['sysuser'])
const emit=defineEmits(['delete','edit'])
// 定义数据对象
let roleData = ref([])
watch(()=>props.sysuser,(newsysuser)=>{
    roleData.value=newsysuser
},{immediate:true})
// 触发删除
function deleteid(id){
emit('delete',id)
}
// 出发编辑
function Edit(row){
    emit('edit',row)
}
</script>
  
  <style scoped>
  :deep(.lableclass) {
    color: black;
    font-weight: 500;
    background-color: #f8f8f9;
  }
  
  :deep(.el-form-item__label) {
    font-weight: bold;
  }
  </style>
